<template>
	<view>
		<cu-custom bgColor="bg-maincolor" :isBack="true" @tap="backtop()">
			<block slot="content">
				实训圈
			</block>
		</cu-custom>
		<view class="one_box">
			<image class="img_school" src="https://zhaojjw.cn/newjbh/202111165415753" mode="aspectFill"></image>
		</view>
		<view class="profile_picture">
			<image  class="tx_picture" :src="handimge" mode="aspectFill"></image>
		</view>
		<view style="margin-top: 35rpx; padding-top: 20rpx;">
		
			<view class="tow_box" v-for="(item,index) in list" :key='index' :style="(index===0)?'border-top-width: 0rpx;':''" >
				<view class="flex">
					<image class="tx_box" :src="item.avatar"></image>
					<view class="center_box">
						<view class="name_text">{{item.nickname}}</view>
						<view class="text_box">{{timeToStr(item.add_time,'MM-dd hh:mm')}}</view>
					</view>
				</view>
				<view class="editor_box">{{item.content}}</view>
					<block v-if="item.type==1" >
						<view class="imagelist flex" >
								<image v-for="(image,imageIndex) in item.images" :key='imageIndex' :src="image" class="image_box" @tap="previewImage(image,index)"  mode="aspectFill" v-if="image!=''">
								</image>
						</view>
					</block>
					<block v-if="item.type==3">111</block>
					<view class="function_box">
						<view class="morefunction_box" v-show="duofunction_box == index">
							<view class="more_box">
								<view>
									<text class="likeicon cuIcon-like"></text>
									<text class="zan">赞</text>
								</view>
								<view class="titleicon cuIcon-titles"></view>
								<view>
									<text class="likeicon cuIcon-new"></text>
									<text class="zan">评论</text>
								</view>
							</view>
						</view>
						<view class="goodBox" @click="morefunction(index)">
							<view class="but_box">··</view>
						</view>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	const {appLogin,httpGet,httpPost,timeToStr} = require("@/utils/common.js")
	export default {
		data() {
			return {
				timeToStr:timeToStr,
				user_id:0,
				last_circle_id:0,
				handimge:"https://img.ivsky.com/img/tupian/t/201606/30/meiruhuadezhaoyangyuxiyangtupian-001.jpg",
				img_list:[],
				list:[],
				morefunction_box:false,
				duofunction_box:-1
			}
		},
		onLoad() {
			appLogin((user_info)=>{
				console.log(user_info)
				this.handimge = user_info.avatar
			})
		},
		onShow(){
			this.display()
			// 回到页面展示
		},
		onReachBottom(){   // 页面滚动到底部
			this.last_circle_id = this.list[this.list.length-1].circle_id
			this.display()
		},
		methods: {
			// 点击返回顶部按钮 跳回顶部
			backtop() {
				uni.pageScrollTo({
					scrollTop: 0
				});
			},
			morefunction(index){
				if(this.duofunction_box == index) {
					this.duofunction_box = -1
				}
				else{
					this.duofunction_box = index
				}
				// this.morefunction_box=true
			},
			previewImage(image,index){
				console.log(this.list,index)
				uni.previewImage({
					current:image,
					urls: this.list[index].images,
				})
			},
			display(){
				httpGet({
					url:'/api/circle/list',
					data:{
						user_id:this.user_id,
						last_circle_id:this.last_circle_id
					}
				}).then((res) => {
					console.log(res)
					this.list = this.list.concat(res.result.list)
					
				})
			}
		}
	}
</script>

<style>
	
	page{
		background-color: #FFFFFF;
	}
	
	.one_box{
		height: 465rpx;
	}
	.img_school{
		height: 465rpx;
		width: 100%;
	}
	
	.profile_picture{
		position: absolute;
		right: 20rpx;
		margin-top: -75rpx;
		width: 122rpx;
		height: 122rpx;
		border-radius: 15rpx;
	}
	
	.tx_picture{
		width: 122rpx;
		height: 122rpx;
		border-radius: 15rpx;
	}
	
	.tow_box{
		border-width: 1rpx;
		border-top-style: solid;
		border-color: #eeeeee;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		padding-left: 45rpx;
		padding-right: 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 6rpx;
	}
	
	.tx_box{
		width: 102rpx;
		height: 102rpx;
		border-radius: 10rpx;
	}
	
	.center_box{
		margin-top: 7rpx;
		margin-left: 30rpx;
	}
	
	.name_text{
		color: #586b95;
		font-size: 35rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.text_box{
		font-size: 22rpx;
		color: #999999;
	}
	
	.editor_box{
		margin-top: 39rpx;
		color: #333333;
		font-size: 31rpx;
		width: 680rpx;
		word-break: keep-all;
		word-wrap: break-word;
		white-space: pre-line;
	}
	
	.imagelist{
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}
	
	.image_box{
		width: 210rpx;
		height: 210rpx;
		margin-bottom: 15rpx;
		margin-right: 15rpx;
	}
	
	.but_box{
		position: absolute;
		right: -14rpx;
		top: 20rpx;
		width: 60rpx;
		height: 38rpx;
		border-radius: 20rpx;
		background-color: #f8f8f8;
		text-align: center;
		line-height: 38rpx;
		font-size: 45rpx;
		color: #3e5786;
		font-weight: bold;
		border-color:  #f8f8f8;
	}
	.goodBox{
		position: relative;
		height: 40rpx;
		left: 650rpx;
		background-color: #FFFFFF;
	}
	.function_box{
		display: flex;
		/* height: 100rpx; */
	}
	.more_box{
		position: absolute;
		right: 108rpx;
		margin-top: 6rpx;
		width: 300rpx;
		height: 60rpx;
		background-color: #4c5153;
		border-radius: 15rpx;
		color: #FFFFFF;
		/* margin-top: 37rpx; */
		padding-top: 5rpx;
		padding-left: 28rpx;
		padding-right: 28rpx;
		display: flex;
	}
	.likeicon{
		font-size: 37rpx;
		/* height: 75rpx; */
		color: #FFFFFF;
		margin-right: 15rpx;
		/* margin-top: 15rpx; */
	}
	.zan{
		color: #FFFFFF;
		font-size: 26rpx;
		height: 60rpx;
		line-height: 60rpx;
		/* margin-bottom: 15rpx; */
		/* margin-top: 3rpx; */
	}
	.titleicon{
		margin-right: 15rpx;
		margin-left: 15rpx;
		margin-top: 8rpx;
		color: #383e3f;
		font-size: 35rpx;
	}
</style>
